import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Button,Switch} from "antd-mobile";
import {Input, Form } from "react-vant";
import './Addaddress.css'
import  axios from "axios"

export default function Addaddress() {
  const navigate = useNavigate();
  const [name,setName] = useState('')
  const [phone, setPhone] = useState('')
  const [address, setAddress] = useState('')
  const [address1, setAddress1] = useState('')

  return (
    <div style={{ backgroundColor: "rgb(244, 248, 255)", height: "100vh" }}>
      <div className="pj">
        <NavBar
          onBack={() => {
            navigate(-1);
          }}
        >
          添加新地址
        </NavBar>
      </div>
      <div>
        <Form.Item
          name="username"label="姓名">
          <Input placeholder="收货人姓名" value={name} onChange={(value)=>{setName(value)}} />
        </Form.Item>
        <Form.Item
          name="password" label="电话">
          <Input placeholder="收货人电话" value={phone} onChange={(value)=>{setPhone(value)}} />
        </Form.Item>

        <Form.Item>
          <Input placeholder="所在地区(省，市，区)" value={address} onChange={(value)=>{setAddress(value)}}/>
        </Form.Item>
        <Form.Item>
          <Input placeholder="详细地址(接到，门牌号等)" value={address1} onChange={(value)=>{setAddress1(value)}} />
        </Form.Item>
        <Form.Item name='switch' label='设为默认地址' valuePropName='checked'>
        <Switch
          defaultChecked
          style={{
            '--checked-color': 'rgb(153, 204, 51)',
            '--height': '20px',
            '--width': '30px',
          }}
        />
        </Form.Item>
      </div>
      <Button onClick={async()=>{
         await axios.post('/linmr/addaddress',{name,phone,address,address1})
         .then((res)=>{
          console.log(res.data)
          navigate(-1)
         })

      }} className="btn1">
          保存
      </Button>
    </div>
  );
}
